<script setup>
import {onMounted, reactive, ref} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from "@/utils/amusement"

const dialogAddState = ref(false)
//如果后面格式错误，就变成tostring格式
onMounted(() => {
  // 从sessionStorage中获取值并赋给表单数据，并设置为只读状态
  const snameFromSession = JSON.parse(sessionStorage.getItem('loginUser')).sname;
  if (snameFromSession) {
    formAdd.sname = snameFromSession;
  }

  const sidFromSession = JSON.parse(sessionStorage.getItem('loginUser')).sid;
  if (sidFromSession) {
    formAdd.sid = sidFromSession;
  }

  const teamidFromSession = 39;
  if (teamidFromSession) {
    formAdd.teamid = teamidFromSession;
  }

});
const dialogAddOnSubmit = () => {
  // 数据提交到服务器
  // 服务器端返回成功 ：清空表单，关闭对话框，更新表格内容
  request({
    method: 'post',
    url:'/sys/team/add',
    params:formAdd
  }).then(req => {
    if (200 == req.data.errorCode) {
      ElMessage({
        type: 'success',
        message: "已提交申请"
      });
    } else {
      ElMessage({
        type: 'error',
        message: req.data.msg
      });
    }
  });
  dialogAddState.value = false
}

const dialogAddOnReset = () => {
  // 清空表单数据
  Object.assign(formAdd , formAddData)
  // 关闭对话框
  dialogAddState.value = false
}

// 新增表单引用
const formAddRef = ref()
// 新增表单初始化数据
const formAddData = {
  sid : '' ,
  teamid : '' ,
  reason : '' ,
  sname: ''
}
// 新增表单绑定数据模型
const formAdd = reactive({...formAddData})
const addRules = reactive({
  reason: [
    {required: true, message: '此项不能为空', trigger: 'blur'},
    {min: 2,max:200, message: '2-100字之间', trigger: 'blur'}
  ],
})
</script>

<template>
  <div>
    <!-- 导航栏 -->
    <nav>
      <a href="/#/home">网站首页</a>
      <a href="/#/home/amusement">娱乐天地</a>
      <a href="/#/home/amusement/dancehome/danceclub1">星光舞蹈社</a>
      <a href="/#/home/amusement/dancehome/danceclub2">天鹅舞蹈社</a>
    </nav>

    <!-- 主要区域 -->
    <div id="main">
      <div id="banner">
        <div class="banner-container">
          <div class="img-container1">
            <img src="@/assets/imgs/index4.jpg" alt="banner">
          </div>
          <div class="text-container1">
            <h1>劲舞社</h1>
          </div>
          <div style="text-align: right">
            <el-button-group>
              <el-button type="primary" @click="dialogAddState=true">点击加入我们！</el-button>
            </el-button-group>
          </div>
          <div class="image-text-container">
            <img src="@/assets/imgs/dance3.jpg" alt="校园奶爸">
            <p>劲舞社是一个充满活力和创造力的跳街舞社团。我们聚集了热爱街舞文化的年轻舞者，不论是初学者还是有经验者，都能在这里找到舞蹈的乐趣和挑战。社团定期举行训练课程和创意工作坊，旨在提升技巧并探索新的舞蹈风格和动作。劲舞社不仅致力于在舞台上展示精彩表演，还积极参与各类比赛和社区活动，通过舞蹈表达个性和情感。我们鼓励团队合作和个人成长，为每位成员创造一个充满激情和支持的舞蹈家庭。</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <footer>
      &copy; 2024 娱乐天地-Author
    </footer>
  </div>

  <!-- 新增模态框 -->
  <el-dialog v-model="dialogAddState" title="个人简介" width="700">
    <div>
      <el-form ref="formAddRef" :model="formAdd":rules="addRules" label-width="120px">
        <el-form-item prop="sname" label="姓名">
          <el-input v-model="formAdd.sname" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item prop="price" label="学号">
          <el-input v-model="formAdd.sid" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item prop="putdate" label="劲舞社编号">
          <el-input v-model="formAdd.teamid" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item prop="reason" label="（100字内）特长">
          <el-input v-model="formAdd.reason" maxlength="200"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogAddOnReset">取消</el-button>
        <el-button type="primary"  @click="dialogAddOnSubmit" >确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
/* 基本样式 */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color:#FFF5EE;
}

/* 导航栏样式 */
nav {
  background-color: #ff7f50; /* 粉色背景 */
  color: #fff;
  text-align: center;
  border-radius: 15px;
  padding: 10px 50px;
}
nav a {
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  color: inherit;
  border-radius: 15px; /* 格子部分圆滑处理 */
  margin-right: 10px; /* 部分格子之间增加间距 */
}
nav a:hover {
  background-color: #ffffff; /* 鼠标悬停时的背景颜色 */
  color: #ff7f50; /* 鼠标悬停时的文字颜色 */
}

/* 主要区域样式 */
#main {
  max-width: 800px;
  margin: 50px auto;
  padding: 0 20px;
}

.banner-container {
  position: relative;
}

.img-container1 {
  height: 400px;
  overflow: hidden;
}

.img-container1 img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.text-container1  h1 {
  font-size: 36px;
  font-weight: bold;
  margin-top: 10px; /* 去除标题顶部的默认边距 */
  text-align: left; /* 将标题文字左对齐 */
}

.image-text-container {
  margin-top: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-text-container img {
  max-width: 45%;
  border-radius: 15px;
  margin-right: 5%;
}

.image-text-container p {
  max-width: 50%;
  font-size: 20px;
  line-height: 1.5;
  text-align: justify;
}

/* 底部样式 */
footer {
  background-color: #f0f0f0;
  padding: 10px;
  text-align: center;
  border-radius: 15px;
}
</style>
